<template>
  <div class="upload-excel-container">
    <vxe-toolbar>
      <template v-slot:buttons>
        <vxe-button @click="insertEvent()">
          新增
        </vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      max-height="400"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row'}"
      @edit-actived="editActivedEvent"
    >
      <vxe-table-column
        type="seq"
        width="60"
      />
      <vxe-table-column
        field="name"
        title="Name"
        :edit-render="{name: 'input'}"
      />
      <vxe-table-column
        field="role1"
        title="Role"
        :edit-render="{name: '$select', options: roleList, props: {clearable: true}, events: {change: roleChangeEvent}}"
      />
      <vxe-table-column
        field="date12"
        title="Date"
        :edit-render="{name: '$input', props: {type: 'date'}}"
      />
    </vxe-table>

    <!-- <vxe-toolbar>
      <template v-slot:buttons>
        <el-button
          v-if="noError"
          type="primary"
          @click="uploadData"
        >
          上传到服务器
          <i class="el-icon-upload el-icon--right" />
        </el-button>
      </template>
    </vxe-toolbar> -->
  </div>
</template>

<script>
import UploadExcelComponent from "@/components/UploadExcel/index.vue";

export default {
          data () {
            return {
              tableData: [],
              roleList: [ 
                {
                  label: '前端',
                  value: '1',
                  disabled: false
                },
                {
                  label: '后端',
                  value: '2',
                  disabled: false
                },
                {
                  label: '项目经理',
                  value: '3',
                  disabled: false
                },
                {
                  label: '设计师',
                  value: '4',
                  disabled: false
                },
                {
                  label: '运维',
                  value: '5',
                  disabled: false
                }
              ]
            }
          },
          created () {
            this.$nextTick(() => {
              this.tableData = this.roleList
              this.updateRoleList()
            })
          },
          methods: {
            insertEvent () {
              let record = {}
              this.$refs.xTable.insert(record)
            },
            updateRoleList () {
              // 获取表格中的全量数据
              let { fullData } = this.$refs.xTable.getTableData()
              this.roleList.forEach(item => {
                if (item.value) {
                  // 如果当前选项已经被选过，则禁用
                  item.disabled = fullData.some(row => row.role1 === item.value)
                }
              })
            },
            roleChangeEvent ({ row }) {
              this.updateRoleList()
            },
            editActivedEvent ({ row }) {
              // 激活编辑时检查剩余选项是否可选择
              this.updateRoleList()
            }
          }
        }
</script>

<style lang="css">
.warning-row {
  background: oldlace !important;
}

.success-row {
  background: #f0f9eb !important;
}

.error-row {
  background: #f3c8c8 !important;
}

.mb-3 {
  margin-bottom: 30px;
}
</style>
